<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列对象</title>
    <script>
        function f1(){
            let s = document.getElementById("s1");
            // 查看当前下拉列中所有的Option对象
            // 此时返回值是一个Option对象数组
            // let ops = s.options;
            // console.log(ops);
            // console.log("当前元素数量:"+ops.length);
            // console.log("当前所选选项的下标:"+ops.selectedIndex);
            // 每一个Option对象有两个核心属性
            // text:文本值,即option标签的标签体内容,也就是在页面中展示的内容
            // value:服务器值,即option标签的value属性值,也就是表单提交时提交到服务器的值
            // for(let i = 0; i < ops.length; i++){
            //     console.log("文本值:"+ops[i].text+",服务器值:"+ops[i].value);
            // }

            // 获取当前所选选项所对应的Option对象
            // let op = ops[ops.selectedIndex];
            // 简写方式
            // let op = s.options[s.options.selectedIndex];
            let op = s[s.selectedIndex];
            console.log("文本值:"+op.text+",服务器值:"+op.value);
        }

        function f2(){
            let s = document.getElementById("s1");
            // let ops = s.options;
            // Option对象的构造函数:new Option(文本值,服务器值);
            // ops[ops.length] = new Option("ddd","4");
            // 简写方式
            // s[s.length] = new Option("ddd","4");

            let inText = document.getElementById("inText").value;
            let inValue = document.getElementById("inValue").value;
            s[s.length] = new Option(inText,inValue);
        }

        function f3(){
            let s = document.getElementById("s1");
            // s[s.selectedIndex] = new Option("ddd","4");
            let inText = document.getElementById("inText").value;
            let inValue = document.getElementById("inValue").value;
            s[s.selectedIndex] = new Option(inText,inValue);
        }

        function f4(){
            let s = document.getElementById("s1");
            s[s.selectedIndex] = null;
        }

        function f5(){
            let s = document.getElementById("s1");
            s.length = 1;
        }
    </script>
</head>
<body>
文本值:<input type="text" id="inText"><br>
服务器值:<input type="text" id="inValue"><br>
<button onclick="f1()">查看当前选项</button>
<button onclick="f2()">添加</button>
<button onclick="f3()">修改</button>
<button onclick="f4()">删除</button>
<button onclick="f5()">清空</button>
<hr>
<!--<select id="s1" onchange="f1()">-->
<select id="s1">
    <option value="-1">请选择</option>
    <option value="1">aaa</option>
    <option value="2">bbb</option>
    <option value="3">ccc</option>
</select>
</body>
</html>